<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title>wide</title>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:0;height:0;position:absolute;overflow:hidden;">
  <defs>
<symbol viewBox="0 0 900 1200" aria-labelledby="cusi-bootstrap-file-title" id="si-bootstrap-file"><path d="M500 0v400q0 41 29.5 70.5T600 500h300v650q0 21-14.5 35.5T850 1200H50q-21 0-35.5-14.5T0 1150V50q0-21 14.5-35.5T50 0h450zm400 400H650q-21 0-35.5-14.5T600 350V100z"/></symbol>
<symbol viewBox="0 0 1100 1100" aria-labelledby="dasi-bootstrap-floppy-disk-title" id="si-bootstrap-floppy-disk"><path d="M1100 200v850q0 21-14.5 35.5T1050 1100H900V700H200v400H50q-21 0-35.5-14.5T0 1050V50q0-20 14.5-35T50 0h250v300h500V0h100zm-400 0H600V0h100v200z"/></symbol>
<symbol viewBox="0 0 1200 1100" aria-labelledby="dfsi-bootstrap-folder-close-title" id="si-bootstrap-folder-close"><path d="M1200 100v100H0V100h200q0-41 29.5-70.5T300 0h300q41 0 70.5 29.5T700 100h500zM0 300h1200v800H0V300z"/></symbol>
<symbol viewBox="0 0 1500 1100" aria-labelledby="dgsi-bootstrap-folder-open-title" id="si-bootstrap-folder-open"><path d="M200 300L0 700V100h200q0-41 29.5-70.5T300 0h300q42 0 71 29.5t29 70.5h500v200H200zm1300 100l-300 700H0l300-700h1200z"/></symbol>
<symbol viewBox="0 0 1100 1179" aria-labelledby="edsi-bootstrap-import-title" id="si-bootstrap-import"><path d="M135 156L277 14q14-14 35-14t35 14l77 77-212 212-77-76q-14-15-14-36t14-35zm520 168l210-210q14-14 24.5-10t10.5 25l-2 599q-1 20-15.5 35T847 778l-597 1q-21 0-25-10.5t10-24.5l208-208-154-155 212-212zM50 879h1000q21 0 35.5 14.5T1100 929v250H0V929q0-21 14.5-35.5T50 879zm850 100v50h100v-50H900z"/></symbol>
<symbol viewBox="0 0 875 1065.3333740234375" aria-labelledby="ggsi-bootstrap-play-title" id="si-bootstrap-play"><path d="M43 8.667l814 498q18 11 18 26t-18 26l-814 498q-18 11-30.5 4t-12.5-28v-1000q0-21 12.5-28t30.5 4z"/></symbol>
<symbol viewBox="0 0 1140.97412109375 1200" aria-labelledby="dmsi-elusive-file-new-title" id="si-elusive-file-new"><path d="M226.07 0L0 218.249V1200h605.976v-104.329H104.993V292.18h197.59V104.33h442.842v312.986h104.993V0H226.07zm472.725 508.73v249.09H449.631v193.09h249.164V1200H891.81V950.91h249.164V757.82H891.81V508.73H698.795z"/></symbol>
<symbol viewBox="0 0 1200 1200" aria-labelledby="ifsi-elusive-remove-title" id="si-elusive-remove"><path d="M0 264.84L335.16 600 0 935.16 264.84 1200 600 864.84 935.16 1200 1200 935.16 864.84 600 1200 264.84 935.16 0 600 335.16 264.84 0 0 264.84z"/></symbol>
<symbol viewBox="0 0 1000 1000" aria-labelledby="exsi-bootstrap-menu-hamburger-title" id="si-bootstrap-menu-hamburger"><path d="M25 0h950q10 0 17.5 7.5T1000 25v150q0 10-7.5 17.5T975 200H25q-10 0-17.5-7.5T0 175V25Q0 15 7.5 7.5T25 0zm0 400h950q10 0 17.5 7.5t7.5 17.5v150q0 10-7.5 17.5T975 600H25q-10 0-17.5-7.5T0 575V425q0-10 7.5-17.5T25 400zm0 400h950q10 0 17.5 7.5t7.5 17.5v150q0 10-7.5 17.5T975 1000H25q-10 0-17.5-7.5T0 975V825q0-10 7.5-17.5T25 800z"/></symbol>
<symbol viewBox="0 0 1100 1300" aria-labelledby="jfsi-bootstrap-trash-title" id="si-bootstrap-trash"><path d="M400 0h300q41 0 70.5 29.5T800 100v100h275q10 0 17.5 7.5t7.5 17.5v75H0v-75q0-10 7.5-17.5T25 200h275V100q0-41 29.5-70.5T400 0zm0 100v100h300V100H400zm600 300v800q0 41-29.5 70.5T900 1300H200q-41 0-70.5-29.5T100 1200V400h900zM200 500v700h100V500H200zm200 0v700h100V500H400zm200 0v700h100V500H600zm200 0v700h100V500H800z"/></symbol>
<symbol viewBox="0 0 16 14" aria-labelledby="qlsi-icomoon-terminal-title" id="si-icomoon-terminal"><path d="M0 0v14h16V0H0zm15 13H1V1h14v12zM14 2H2v10h12V2zM7 7H6v1H5v1H4V8h1V7h1V6H5V5H4V4h1v1h1v1h1v1zm4 2H8V8h3v1z"/></symbol>
  </defs>
</svg>

<style>
html,body,#container { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #1e1e1e; font-family: Consolas, "Courier New", monospace; color: #d4d4d4; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track {  background-color: hsla(0,0%,29%,.4); }
::-webkit-scrollbar-thumb { background-color: hsla(0,0%,59%,.4); }
div, p { margin: 0; padding: 0; box-sizing: border-box; }

#container { position: relative; overflow: hidden; }
#top { position: relative; overflow: hidden; width: 100%; height: calc( 100% - 30px ); border-bottom: 1px solid black; }
#sidebar { width: 239px; height: 100%; position: absolute; left: 0; top: 0; border-right: 1px solid #000; }
#sidebar .header { overflow: hidden; width: 100%; height: 30px; position: absolute; left: 0; top: 0; background-color: #111; line-height: 30px; white-space: nowrap; }
#open-files, #folder-files { position: absolute; top: 30px; width: 100%; height: calc( 100% - 30px ); }
#folder-files { display: none; overflow: auto; }
#folder-files.loading { }
#code-area{ width: calc( 100% - 240px ); height: calc( 100% - 1px ); position: absolute; right: 1px; top: 0px; }
#code-header{ width: 100%; height: 30px; color: #AAA; background-color: #111; line-height: 30px; padding-left: 10px; }
#code-header .close { float: right; cursor: pointer; }
#code-editor{ width: 100%; height: calc( 100% - 30px); }
#folder-files p { padding: 10px; color: #999; }
#folder-files input { margin-left: 17px; color: #AAA; background-color: #333; border: 1px solid #888; padding: 4px; }
#folder-files .icon { fill: #777; width: 14px; height: 14px; padding: 1px; display: inline-block; }
.folder .icon { fill: #5abd66 !important; opacity: 0.5; }
.folder.current-folder .icon { fill: #DDD !important; opacity: 0.5; }
.parent-folder .icon { fill: #729ad8 !important; }
button:focus, input:focus { outline: 0; }
.editor-wrapper { width: 100%; height: 100%; }
.filename { color: #aaa; padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.filename { padding: 0px 2px; }
#open-files .filename:hover, #folder-files .filename:hover { color: #FFF !important; cursor: pointer; background-color: #222; }
#open-files .filename:hover .icon, #folder-files .filename:hover .icon { fill: #FFF !important; }
.filename.selected { background-color: #333; }
.filename.modifyed { text-decoration: underline; }
.filename.notloaded { opacity: 0.5; }
.filename .number { opacity: 0.5; font-size: 0.6em; border-radius:2px; background-color:#333; border: 1px solid #444; margin-right: 4px; min-width: 1em; }
.filename .close { float: right; opacity: 0.5; cursor: pointer; }
.filename.folder { font-weight: bold; color: #5abd66; }
.filename.parent-folder { font-weight: bold; color: #729ad8; }
.filename.current-folder { font-weight: bold; color: #DDD; }
.filename.new-file { opacity: 0.5; padding-left: 8px !important; margin-bottom: 10px; }
.filename.blocked { opacity: 0.25; cursor: not-allowed !important;}
.filename.new-file input { width: 100%; background-color: black; color: white; border: 0; padding: 4px; }
.filename.open { border-right: 4px solid #445c5c; }
span.size { opacity: 0.5; }
#code-header .filename { color: #AAA;}
#code-header .filename .slash { color: #f242f2; margin: 0px 2px; }
#code-header .filename .last { color: white; }
#sidebar .header button { background-color: black; margin-right: 2px; border: 0; color: #EEE; cursor: pointer; font-size: 0.8em; }
#sidebar button .icon { fill: #83868a; width: 20px; height: 20px; padding: 2px; }
#sidebar button:hover .icon { fill: white; }
#sidebar button.selected { background-color: #444; }
#sidebar button.selected .icon { fill: #DDD; }
#sidebar .project-title { background-color: #404040; color: #b5b5b5; padding: 4px; padding-left: 10px; width: 100%; margin-bottom: 4px; }
#sidebar .project-title .buttons { float: right; }
#sidebar .project-title .buttons span { margin-right: 4px; cursor: pointer; }
.saving  #code-header { background-color: #AAA !important; color: black !important; }
.saving  #code-editor { outline: 1px solid #AAA !important; }

#bottom { position: absolute; overflow: hidden; bottom: 0; width: 100%; height: 30px; background-color: black; color: #AAA; }
#bottom .text-input { height: 30px; width: 100%; }
#bottom .prompt { width: 14px; display: inline-block; }
#bottom input { background-color: black; width: calc( 100% - 14px ); height: 100%; border: 0; color: white; font-size: 16px; font-family: "Courier New";}

#console { width: 100%; background-color: black; color: #EEE; overflow: auto; }
#container.show_console #top { height: 50%; }
#container.show_console #console { display: block !important; height: calc( 100% - 30px ); }
#container.show_console #bottom { height: 50%; }
#console .msg { color: #888; padding-left: 5px; }
#console .msg.me { color: white; padding-left: 5px; }
#console .msg.warn { color: #ffde3a; }
#console .msg.error { color: #f85d5d; }
#console .msg.folder { color: #5abd66; }

#loader { font-family: Arial Black; font-size: 150px; text-align: center; width: 100%; height: 100%; color: #222; }
</style>

</head>
<body>

<div id="loader">LOADING WIDE EDITOR</div>
<div id="container"><div id="top"><div id="sidebar"><div class="header"></div><div id="open-files"></div><div id="folder-files"></div></div><div id="code-area"><div id="code-header"></div><div id="code-editor"></div></div></div><div id="bottom"><div id="console" style="display:none"></div><div class="text-input"><span class="prompt">]</span><input type="text" placeHolder="type commands here..." id="console-input" autocorrect="off" autocapitalize="off" spellcheck="false"/></div></div></div>

<script src="js/monaco-editor/min/vs/loader.js"></script>
<script src="code.js"></script>
</body>
</html>